import React from 'react';
import Cnav from '../cnav/Cnav';
import ClubBanner from './clubBanner/ClubBanner';
import AthleteBanner from './athleteBanner/AthleteBanner';
import ScheduleBanner from './scheduleBanner/ScheduleBanner';

class Banner extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Banner';
        //  bannerMode 三个可选项: club , athlete, schedule
        // buttonShow 是传给 scheduleBanner 的，用来 选择是否 显示观看直播的按钮
        this.state = {
            bannerMode: props.mode,
            data: props.data,
            buttonShow: props.button
        }
    }

    componentWillMount() {
        console.log("Banner will mount" );
        console.log("*****banner******");
        console.log( this.props );
    }

    componentWillReceiveProps(nextProps) {
        console.log("Banner will receive props" );

        console.log( nextProps );
        this.setState({
            bannerMode: nextProps.mode,
            data: nextProps.data,
        });
    }

    render() {
        // console.log( "banner" );

        let bannerChoice = function( mode ) {
            if( mode=="club" ) {
            return (<ClubBanner data={this.state.data}/>)
            } else if( mode == "athlete") {
                return <AthleteBanner data={this.state.data} />
            } else {
                return <ScheduleBanner button = {this.state.buttonShow} data={this.state.data}/>
            }
        }.bind(this);

        return bannerChoice(this.state.bannerMode);
    }
}

export default Banner;
